<template>
    <el-dialog :title="title" v-model="open" width="680px" append-to-body @close="close">
        <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="菜单权限">
                <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
                <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
                <el-checkbox v-model="menuCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
                <el-tree
                        class="tree-border"
                        :data="menuOptions"
                        show-checkbox
                        :check-strictly="menuCheckStrictly"
                        ref="menu"
                        node-key="menuId"
                        :props="defaultProps"
                ></el-tree>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {getRoleMenuTreeSelect} from '/src/api/system/menu'
    import {assignMenuPermission} from '/src/api/system/role'

    export default {
        name: "menuPermission",
        emits: ['menuPermissionStatusChanged'],
        props: {
            open: Boolean,
            title: String,
            form: Object,
        },
        data() {
            return {
                menuOptions: [],
                defaultProps: {
                    children: "children",
                    label: "menuName"
                },
                menuNodeAll: false,
                menuExpand: false,
                menuCheckStrictly: false,
            }
        },
        watch: {
            open(val) {
                if (val) {
                    this.getMenuListByParam()
                }
            }
        },
        methods: {
            getMenuListByParam() {
                let that = this
                getRoleMenuTreeSelect(that.form.roleId).then(response => {
                    that.menuOptions = response.menus;
                    that.$refs.menu.setCheckedKeys(response.checkedKeys)
                });
            },
            // 树权限（展开/折叠）
            handleCheckedTreeExpand(value) {
                let treeList = this.menuOptions;
                for (let i = 0; i < treeList.length; i++) {
                    this.$refs.menu.store.nodesMap[treeList[i].menuId].expanded = value;
                }
            },
            // 树权限（全选/全不选）
            handleCheckedTreeNodeAll(value) {
                this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
            },
            // 树权限（父子联动）
            handleCheckedTreeConnect(value) {
                this.menuCheckStrictly = value ? true : false;
            },
            submitForm() {
                this.form.menuIds = this.getMenuAllCheckedKeys();
                //更改菜单权限
                assignMenuPermission(this.form).then(res => {
                    this.close()
                })
            },
            // 所有菜单节点数据
            getMenuAllCheckedKeys() {
                // 目前被选中的菜单节点
                let checkedKeys = this.$refs.menu.getCheckedKeys();
                // 半选中的菜单节点
                let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
                checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
                return checkedKeys;
            },
            cancel() {
                this.$emit('menuPermissionStatusChanged', false)
            },
            close() {
                this.$emit('menuPermissionStatusChanged', false)
            },
        },
    }
</script>

<style scoped>

</style>
